<script setup lang="ts">
import {
  computed,
  inject,
  onBeforeUnmount,
  onMounted,
  PropType,
  provide,
  ref,
} from "vue";
import _ from "lodash";
import { EnumOpType, EnumViewType } from "@renderer/assets/types";
import FourCornerLayer from "@renderer/view/components/singleViewer/FourCornerLayer.vue";
import CrossLayer from "@renderer/view/components/singleViewer/CrossLayer.vue";
import { getActiveTabViewOp } from "@renderer/view/hooks/common";
import PercentRuleLayer from "@renderer/view/components/singleViewer/PercentRuleLayer.vue";
import PseudoColorLayer from "@renderer/view/components/singleViewer/PseudoColorLayer.vue";
import { useSystemSettingStore } from "@renderer/store/pinia/systemSetting";

const props = defineProps({
  viewId: {
    type: String,
    required: true,
  },
  imgSrc: {
    type: String,
  },
  viewType: {
    type: String as PropType<EnumViewType>,
    default: () => EnumViewType.stack,
  },
  center: {
    type: Object,
  },
  fourCornerInfo: {
    type: Object,
    default: null,
  },
});

const hasImgRef = computed(() => props.imgSrc !== "");

const systemSettingStore = useSystemSettingStore();

const showFourCorner = computed(() => {
  return systemSettingStore.showSetting.showFourConner && hasImgRef.value;
});

const { activeOpObjRef } = getActiveTabViewOp();

const baseFontSize = computed(() => {
  if (aspectRef.value.width) {
    return Math.round(aspectRef.value.width * 0.04);
  }
  return 14;
});

const { tabId } = inject("tabInfo") as any;

provide("viewerInfo", {
  viewType: computed(() => props.viewType),
  activeOpType: activeOpObjRef.value,
  baseFontSize,
  tabId,
  viewId: props.viewId,
});

const viewerRef = ref();

const rect = ref();

const aspectRef = ref({
  width: 0,
  height: 0,
});

const notifyAspect = (width: number, height: number) => {
  const w = Math.floor(width);
  const h = Math.floor(height);
  if (w === 0 || h === 0) {
    return;
  }
  aspectRef.value = {
    width: w,
    height: h,
  };
  emit("setAspect", {
    viewType: props.viewType,
    viewId: props.viewId,
    width: w,
    height: h,
  });
};

let resizeObserver: ResizeObserver;
const watchResize = () => {
  resizeObserver = new ResizeObserver(
    _.debounce((entries) => {
      console.log(`aspect change ${props.viewId}`);
      const { width, height } = entries[0].contentRect;
      rect.value = viewerRef.value.getBoundingClientRect();
      notifyAspect(width, height);
    }),
  );
  // 绑定监听的dom
  resizeObserver.observe(viewerRef.value);
};

onMounted(() => {
  watchResize();
});
onBeforeUnmount(() => {
  resizeObserver.disconnect();
});

const getCursor = () => {
  if (!activeOpObjRef.value) {
    return "";
  }
  if (activeOpObjRef.value.activeOp.type === EnumOpType.pan) {
    return "cursor-(--cursor-move)";
  } else if (activeOpObjRef.value.activeOp.type === EnumOpType.scroll) {
    return "cursor-(--cursor-scroll)";
  } else if (activeOpObjRef.value.activeOp.type === EnumOpType.window) {
    return "cursor-(--cursor-window)";
  } else if (activeOpObjRef.value.activeOp.type === EnumOpType.zoom) {
    return "cursor-(--cursor-zoom)";
  } else {
    return "";
  }
};

const emit = defineEmits(["setAspect"]);
const needRenderCross = computed(() => {
  return props.viewType !== EnumViewType.stack;
});

const showPseudoColor = computed(() => {
  return systemSettingStore.showSetting.showPseudoStrip;
});

const showRule = computed(() => {
  return systemSettingStore.showSetting.showPercentRule;
});

const showCross = computed(() => {
  return true;
});
</script>

<template>
  <div
    class="w-full h-full relative overflow-hidden"
    :class="getCursor()"
    ref="viewerRef"
  >
    <v-fade-transition>
      <img
        class="position-absolute left-0 top-0 w-full"
        v-if="props.imgSrc"
        :src="props.imgSrc"
        alt=""
      />
    </v-fade-transition>
    <four-corner-layer
      v-show="showFourCorner"
      :four-corner-info="fourCornerInfo"
    />
    <div
      v-if="needRenderCross && showCross"
      class="w-full h-full absolute left-0 top-0 z-200"
    >
      <cross-layer :key="viewType" :view-type="viewType" :view-id="viewId" />
    </div>

    <div
      v-show="showPseudoColor"
      class="w-[10px] h-[300px] absolute left-[20px] top-[50%] -translate-y-1/2 z-200"
    >
      <pseudo-color-layer />
    </div>

    <div
      v-show="showRule"
      class="w-full h-[10px] absolute left-0 bottom-[10px] z-200"
    >
      <percent-rule-layer />
    </div>
  </div>
</template>

<style scoped></style>
